import React, { Component } from "react";
import { Text, TouchableOpacity, Image, Platform } from "react-native";
import { SafeAreaView } from "react-navigation";
import Icon from "components/Iconfont";
import back from "../../../assets/images/back.png";

import styles from "./styles";

class TopMenu extends Component {
  render() {
    const { style = {}, goBack, skip } = this.props;
    return (
      <SafeAreaView style={{ ...styles.root, ...style }}>
        <TouchableOpacity style={styles.left} onPress={goBack}>
          {Platform.OS === "ios" ? (
            <Icon name="iconicback" type="icon" style={styles.leftIcon} />
          ) : (
            <Image
              source={back}
              style={{ width: 24, height: 24, marginLeft: 18 }}
            />
          )}
        </TouchableOpacity>
        {/* <View style={styles.center}>
          <Text>Center</Text>
        </View> */}
        <TouchableOpacity style={styles.right} onPress={skip}>
          <Text style={styles.rightText}>跳过</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

export default TopMenu;
